<template>
	<div class="type common-layout">
		<el-header>
			<label>类型管理</label>
			<el-button  @click="add()">添加</el-button>
		</el-header>
		<el-table :data="arr" row-key="id" style="width: 100%;">
			<el-table-column prop="id" label="类型id" width="180"/>
			<el-table-column prop="type" label="书本类型" />
			<el-table-column label="功能">
				<template #default="score">
					<el-button type="text" size="small" @click="enit(score.row.id)">修改</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog :title="txt" v-model="open">
			<el-form>
				<el-form-item label="类型ID">
					<el-input type="number" readonly v-model="cateid"></el-input>
				</el-form-item>
				<el-form-item label="类型名称">
					<el-input v-model="catetype"></el-input>
				</el-form-item>
				<el-form-item label="">
					<el-button @click="postCate()">{{txt}}</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	
	import { defineComponent } from 'vue'
	import { ElMessageBox, ElMessage } from 'element-plus'
	
	export default{
		name:'Type',
		data(){
			return{
				typeslist:[],
				arr:[],
				cateid:'',
				catetype:'',
				txt:'预览',
				open:false
			}
		},
		created() {
			this.axios.get('/api/public/type/findAll2').then((res)=>{
				this.typeslist=res.data.data
				console.log(this.typeslist)
				this.getarr(0,this.arr)
			}).catch((error)=>{
				console.log(error)
			})
		},
		methods:{
			postCate(){
				let that=this
				if (this.catetype!=''&&this.cateid!=='') {
					//发起post请求
					/* 
						提交地址:/api/adm/type/add
						提交的数据:this.$qs.stringify(data)	json字符串
						配置:headers对象
					 */
					let data={
						id : this.cateid,
						type : this.catetype
					}
					this.axios.post('/api/adm/type/add',this.$qs.stringify(data),{
						headers:{'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'}
					}).then((res)=>{
						if (res.status==200) {
							that.typeslist=res.data.data
							that.cateid=''
							that.catetype=''
							that.txt='预览'
						}
					}).catch((error)=>{
						console.log(error)
					})
				}
			},
			add(){
				this.cateid=0
				this.catetype=''
				this.txt='添加'
				this.open=true
			},
			enit(x){
				for (let i in this.typeslist) {
					if (this.typeslist[i].id==x) {
						this.cateid=this.typeslist[i].id
						this.catetype=this.typeslist[i].type
					}
				}
				this.txt='更新'
				this.open=true
			},
			getarr(id,arr){
				if (id==0) {
					this.typeslist.forEach(it=>{
						if (it.pid==0) {
							arr.push(it)
						}
					})
					this.getarr(this.arr[0].id,this.arr)
				} else{
					arr.forEach((it,i)=>{
						this.typeslist.forEach((val,key)=>{
							if (it.id==val.pid) {
								if(!it.children) it.children=[]
								it.children.push(val)
							}
						})
						if (it.children) {
							this.getarr(1,it.children)
						}
					})
				}
			}
		}
	}
</script>

<style scoped>
	.type{
		width: 100%;
	}
	.type .el-header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid black;
		height: 60px;
	}
	.type .el-header label{
		font-weight: bold;
		font-size: 25px;
	}
	.type table{
		width: 50%;
		border: 1px solid black;
		margin-top: 10px;
		float: left;
	}
	.type table tr{
		line-height: 30px;
	}
	.type table tr td{
		border: 1px solid black;
	}

	.type .el-form-item :deep(.el-form-item__label) {
		text-align: center;
		width: 80px;
	}
	.type .el-form-item{
		width: 80%;
		margin: 20px auto;
	}
	.type .el-form-item .el-input{
		/* width: 70%; */
	}
	.type .el-form-item .el-button{
		width: 100%;
	}
</style>
